<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>D站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <script th:src="@{/js/sweetAlert.js}"></script>
</head>
<body>
<div class="wrapper hp_1">
    <!-- 引入头部 -->
    <div th:include="main/simpleHeader :: header"></div>
</div>
<!-- 总容器 container开 始-->
<section class="dyn-container">
    <div class="container" style="max-width: 1170px;">
        <div class="dyn-main">
            <div class="dyn-check-banner">
                <!--不同人的内容-->
                <div class="dyn-check-content">
                    <!--个人展示-->
                    <div class="stateShow">
                        <div class="stateShowWord">
                            <table width="450" border="0" cellpadding="0" cellspacing="0" class="stateTable">
                                <tr>
                                    <td width="80" align="center" valign="top">
                                        <a th:href="@{/user/userMainPage}+ '?userId='+${dynamic.userId}">
                                            <img
                                                    th:src="@{/images/userIcon/{creatorIcon}(creatorIcon=${dynamic.creatorIcon})}"
                                                    th:alt="${dynamic.creatorIcon}" width="48" style="border-radius: 10px;"
                                                    height="48"/><span th:text="${dynamic.creatorName}">乡下妹</span>
                                        </a>
                                    </td>
                                    <td width="440" th:id="${dynamic.dynamicId}">
                                        <p th:text="${dynamic.dynamicContent}">
                                            【视频：超模的儿子每月需要30万元生活费？】-
                                            超模琳达·伊万格丽斯塔为四岁的儿子向他的父亲、法国亿万富翁弗朗索瓦-亨利·皮诺特索要每月4.6万美元的抚养费。在视频中，《华尔街日报》的Robert
                                            Frank和Kelsey Hubbard讨论了富豪家庭在孩子身上的花销。
                                        </p>
                                        <div class="stateImgShow">
                                            <div class="ImgShowDiv" th:each="image:${dynamic.images}" >
                                                <a th:href="@{/images/dynImages/{image}(image=${image})}" th:rel="${dynamic.dynamicId}" target="_blank">
                                                    <img th:src="@{/images/dynImages/{image}(image=${image})}" th:alt="${image}">
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="stateShowtime" th:text="${dynamic.createDate}" style="text-align:end"> 07月31日 08:02</div>
                        <div class="stateOp">
                            <a class="opState" th:onclick="'praise(' + ${dynamic.dynamicId} +')'">
                                <span th:if="${dynamic.isPraise} == 1" id="praiseIcon"
                                      class="iconfont icon-dianzan alive"></span>
                                <span th:if="${dynamic.isPraise} == 0" id="praiseIcon"
                                      class="iconfont icon-dianzan "></span>
                                <span class="video_data" id="praiseNum" th:text="${dynamic.likedNum}"></span>
                            </a>
                            <th:block th:if="${session.userInfo.userId==dynamic.userId}">
                                <a class="opState" th:onclick="'delState(this,\''+${dynamic.dynamicId}+'\')'"><span class="iconfont icon-shanchu"></span></a>
                            </th:block>
                        </div>
                        <div class="huifu"></div>
                    </div>
                    <!--个人展示结束-->
                </div>
            </div>

        </div>
    </div>
</section>
<script th:src="@{/pagesResource/js/jquery.min.js}"></script>
<script th:src="@{/pagesResource/js/popper.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap.min.js}"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!--<script th:src="@{/pagesResource/js/CustomerIndex.js}"></script>-->
<script th:src="@{/pagesResource/js/trim.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script>

    /* 删除动态 */
    function delState(divObj,dynamicId){
        divObj = divObj.parentNode.parentNode;
        swal({
            title: "删除动态",
            text: "你确定要删除该动态吗？",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: '/dynamic/removeDynamicInfo',
                    type: "POST",
                    async: false,    //异步请求
                    cache: true,
                    data: {
                        dynamicId:dynamicId
                    },
                    success: function (data) {
                        if(data["removeRes"]=="success"){
                            swal("删除动态成功!", {
                                icon: "success",
                            });
                            divObj.parentNode.removeChild(divObj);
                        }else{
                            swal("Error", "删除动态失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                })

            }
        });
    }

    /**
     * 点赞
     */
    function praise(dynamicId) {
        $.ajax(
            {
                type: "POST",
                url: "/dynamic/praiseDynamic",
                async: false,    //异步请求
                cache: true,
                data: {
                    "dynamicId": dynamicId
                },
                success: function (data) {
                    // 1. 更新 点赞icon 的样式
                    if(data["res"] == "add") {  //说明是点赞，修改点赞状态以及现在的点赞数量
                        $("#praiseIcon").attr("class", "iconfont icon-dianzan alive");
                    } else {
                        $("#praiseIcon").attr("class", "iconfont icon-dianzan");
                    }
                    //2. 更新现在的点赞数量
                    $("#praiseNum").text(data["praiseNum"]);
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    }

    function userMainPage(userId) {
        window.location.href = "/user/userMainPage?userId=" + userId;
    }
</script>
</body>
</html>